import { memo } from "react";
import { Pagination } from '@mui/material';
import { PaginationWrapper } from "./style";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { changeCurrentPage, changeloading, fetchEntireData } from "../../../../store/moduels/entire";

export const MyPagination = memo((props) => {
  
    const { totalCount, currentPage } = useSelector((state) => {
        return {
            totalCount: state.entire.totalCount,
            currentPage: state.entire.currentpage,
       }
    },shallowEqual) 

    //数据
    const totalPage = Math.ceil(totalCount / 20);
    const startPage = (currentPage-1)*20+1;
    const endPage = (currentPage)*20 ;

    //分页事件
    const dispach = useDispatch();
    const handleChange = (e,page) => {
        window.scroll(0, 0);
        dispach(changeCurrentPage(page));
        dispach(changeloading(true));
        dispach(fetchEntireData({ offset: (page - 1) * 20 }));
        dispach(changeloading(false));
    }

  return (
    <PaginationWrapper>
     
        <Pagination 
        count={totalPage} 
        page={currentPage}
        color="primary"
        size="large"
        onChange={handleChange}   
        />
          <div className="desc">
              第{startPage}-{endPage},共超过{ totalCount}处房源
          </div>     
      
    </PaginationWrapper>
  );
});